<template>
  <div class="splitPane_container">
    <!-- split 分割方向 horizontal 垂直方向 vertical 水平方向 -->
    <!-- min-percent 最小面积占比 -->
    <!-- default-percent 面积默认占比 -->
    <split-pane split="horizontal" :min-percent="8" :default-percent="8" @resize="splitPaneResize">
      <template #paneL><div class="header">头部</div></template>
      <template #paneR>
        <split-pane split="vertical" :default-percent="15" :min-percent="15">
          <template #paneL>
            <div class="menu">侧边栏</div>
          </template>
          <template #paneR>
            <div class="main">内容区域</div>
          </template>
        </split-pane>
      </template>
    </split-pane>
  </div>
</template>
<script>
export default {
  name: 'SplitPaneDemo',
  data() { 
    return {}
  },
  mounted() { },
  methods: {
    splitPaneResize(val) { 
      console.log(val)
    }
  }
}
</script>
<style lang="less" scoped>
.splitPane_container{
  height: 100vh;
  .header{
    height: 100%;
    background-color: chocolate;
  }
  .menu{
    height: 100%;
    background-color: coral;
  }
  .main{
    height: 100%;
    background-color: goldenrod;
  }
  ::v-deep {
    // 去除分割线的背景色
    .splitter-pane-resizer{
      background-color: transparent;
    }
  }
}
</style>